<script setup>

/* 
  路由跳转：
  1.使用路由实例的push方法和replace方法都能实现路由跳转，push可以返回上一页 replace方法是替换历史记录，无法返回上一页
  2.使用路由实例的back方法可以实现返回上一页，使用实例的go方法传入整数可以跳转n个页面 n 为-1 就是返回上一页

  路由传参：在实际项目中路由通常来实现页面跳转，很多时候页面跳转要传递一些数据到目标页面，为了满足这种路由跳转的时候
  声明式路由传参：使用RouterLink标签来实现页面跳转，也可以使用query和 params实现传参，情况跟下面的编程式传参一样
  编程式路由传参 （使用js实现路由跳转）
  query 传参，查询字符串传参，path+query搭配使用（类似于get请求 参数拼接在 浏览器的url 后面，刷新页面数据不会丢失 和 控制台的 query 有参数）
  params 动态路由传参，name+query搭配使用 （要在路由的配置path后面加要接收的参数，比如path:'goods/:id/:age'）更安全一点，（vue2中，不配置path可以接收到参数，但是刷新页面数据丢失）
  props传参【了解】

  重定向：用户访问一个路径，自动跳转的另外一个路径，比如访问404页面

  404页面：用户在地址栏输入的url有错误或路由不存在，此时一般会匹配一个404页面，提示用户继续操作，该页面的配置路由建议放到最后
  

  路由模式：
  1.hash模式，哈希模式。纯前端实现，底层监听了onhashchange事件，局部刷新，很丑
  2.history，历史模式，需要后端支持，底层就是html5 history api：pushState 和 replaceState 局部刷新 漂亮一些
  3.memory模式，主要用于node端，页面的渲染不会反映在url上 【了解】

  路由元信息：如果需要一些数据，这些数据在每个页面中都不一定，也就是强关联，此时可以利用路由的元信息配置项来实现相应功能，否则就是使用if/else等来手动处理。
*/
import { RouterLink, RouterView } from 'vue-router';


</script>

<template>
  <div>
    <RouterLink to="/">登录页</RouterLink> |
    <RouterLink to="/goods">商品页</RouterLink> |
    <RouterLink to="/total/order">订单统计</RouterLink> |
    <RouterLink to="/total/sales">销售统计</RouterLink> |
    <!-- RouterView 路由的出口  -->
    <RouterView />
  </div>
</template>

<style scoped>
.router-link-active {
  color: red;
}
</style>
